<template>
   <div id="surrounding-facilities">
       <div class="warpper">
        <el-form>
            <div class="content" v-for="(item, index) in ruleForm.roomFacilitiesEntities">
                <el-form-item class="nameItem" prop="name">
                    <el-input v-model="item.name" placeholder="请输入名称"></el-input>
                    <div class="deleteItem" v-if="index !== 0">
                        <i class="el-icon-delete"></i>
                    </div>
                </el-form-item>
                <el-form-item prop="description">
                    <el-input type="textarea" :rows="5" v-model="item.description" placeholder="请输入详细信息"></el-input>
                </el-form-item>
            </div>
        </el-form>
        <div class="btn">
            <el-button type="text" @click="addLine">新增下一行</el-button>
        </div>
       </div>
       <div class="information-btn">
            <el-form-item>
                <el-button type="primary" @click="saveForm">保存</el-button>
                <el-button @click="back">取消</el-button>
            </el-form-item>
          </div>
  </div>
   </div>
</template>
<script>
const ButtonFooter = () => import('@/components/common/ButtonFooter')
export default {
  name: 'HotelFacilities',
  data () {
    return {
      ruleForm: {
        timestamp: 0,
        version: 'string',
        operation: 'string',
        roomId: 1,
        roomFacilitiesEntities: [
          {name: '',
            description: ''
          }
        ]
      }
    }
  },
  methods: {
    addLine () {
      this.ruleForm.roomFacilitiesEntities.push({name: '', description: ''})
    },
    saveForm () {
      this.$http.post('http://222.244.146.208/room/facilities/update?token=' + window.commo.token, this.ruleForm).then(res => {
        if (res.data.errCode) {
          this.$alert(res.data.errMsg, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            callback: action => {
            }
          })
        }
        if (!res.data.errCode) {
          this.$alert('保存成功', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            callback: action => {
            }
          })
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  },
  components: {
    ButtonFooter
  }
}
</script>

<style lang="scss">
.warpper {
       width: 60%;
       padding: 20px;
       .el-form-item {
           margin-bottom: 30px;
       }
       .btn {
           text-align: left;
       }
   }
   .content {
       width: 70%;
        .nameItem {
            width: 50%;
            position: relative;
            .deleteItem {
                position: absolute;
                right: -5%;
                bottom: 0;
            }
        }
   }
   
</style>
